<template>
  <div class="dialog_page">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :width="dialogWidth"
    >
      <slot name="content" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MyDialog',
  props: {
    dialogWidth: {
      type: String,
      default: '300px'
    },
    title: {
      type: String,
      default: '标题'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: '提示'
    }
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog', false)
    }
  }
}
</script>
<style scoped lang="scss">
  /**
    对话框设置圆边框
  */
  ::v-deep .el-dialog{
    overflow: hidden;
    border-radius: 15px 15px 10px 10px;
  }
  /**
    对话框标题背景色和内边距
  */
  ::v-deep .el-dialog__header{
     background-color: #409EFF;
     padding: 10px;
  }
  /**
    对话框标题字体大小和字体颜色
  */
  ::v-deep .el-dialog__title{
    font-size:  14px;
    color: #ffffff;
  }
  /**
    对话框右上角关闭字体颜色
  */
  ::v-deep .el-dialog__headerbtn .el-dialog__close{
    color: #ffffff;
  }
  /**
    对话框右上角关闭字体位置
  */
  ::v-deep .el-dialog__headerbtn{
    top: 10px;
    right: 10px;
  }
  /**
    对话框主体内容
  */
  ::v-deep .el-dialog__body{
    padding: 15px 10px;
  }
</style>
